<!--
 * @Author: ChunLai
 * @Date: 2023-03-17 11:58:04
 * @LastEditTime: 2025-08-19 10:04:47
 * @Description: 必读列表
 * @FilePath: \02.bldinsure\src\views\sign\components\protocols\MustList.vue
-->
<template>
  <div>
    <div
      v-for="(item, index) in lists"
      class="protocol"
      :key="`html-img-${index}`"
      @click="itemClick(index)"
    >
      <div class="notice_img mr6">
        <MsImgIcon size="13" name="checked" v-if="item.isFinish" />
      </div>
      <i>本人已阅读并同意</i> <em>{{ getFileName(item.fileName) }}</em>
    </div>
    <!-- 弹出框展示文件 -->
    <van-popup
      v-model="showPop"
      position="bottom"
      :style="{ height: '80%' }"
      sticky
    >
      <van-tabs v-model="activeNav" @change="changetabs">
        <van-tab
          v-for="(item, index) in lists"
          :title="item.fileName"
          :key="`tab_html${index}`"
        >
          <div class="readContent" @scroll="scrollEvent" :ref="'read' + index">
            <TabberItem
              :item="item"
              :index="index"
              v-if="item && item.fileName"
            />
          </div>
        </van-tab>
      </van-tabs>
      <div class="footer-button" v-if="lists[activeNav]">
        <div
          class="footer-btn"
          @click="handleEvent(lists[activeNav])"
          v-if="popBtnStatus(lists[activeNav])"
        >
          我已阅读并同意
        </div>
        <div class="footer-btn disabled" v-else>
          {{ lists[activeNav].tickContent ? "我已阅读并同意" : btnTxt }}
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TabberItem from "./TabberItem";
export default {
  name: "MustList",
  data() {
    return {
      showPop: false,
      btnTxt: "请仔细阅读以上文件",
      activeNav: 0,
      scrollFinsish: false,
      timeOut: "",
    };
  },
  components: { TabberItem },
  computed: {
    ...mapGetters({
      lists: "readings/tabLists",
      htmlFinish: "readings/htmlFinish",
      readFinish: "readings/wholeFinish",
    }),
  },
  watch: {
    htmlFinish(val) {
      if (val == true) {
        this.showPop = false;
      }
    },
    readFinish(val) {
      if (val == true) {
        this.showPop = false;
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    popBtnStatus(item) {
      const cond1 = this.scrollFinsish || item.isFinish;
      if (item.tickContent && item.tickCheck && cond1) {
        return true;
      }
      if (cond1) {
        return true;
      }
      return false;
    },
    getFileName(name) {
      let res = name;
      if (name && name.indexOf("《") == -1) {
        res = `《${name}》`;
      }
      return res;
    },
    itemClick(idx) {
      this.showPop = true;
      this.activeNav = idx;
      this.changetabs();
    },
    handleEvent(item) {
      if (item.tickContent && !item.tickCheck)
        return this.$toast("请确认并勾选");
      if (this.htmlFinish) {
        this.activeNav = 0;
        this.showPop = false;
      } else {
        this.$store.dispatch("readings/setItemFinish", {
          type: "html",
          index: this.lists[this.activeNav].id,
        });
        this.activeNav += 1;
        this.changetabs();
      }
    },
    changetabs() {
      this.scrollFinsish = false;
      if (this.lists[this.activeNav]?.tickContent) return;
      this.btnTxt = "请仔细阅读以上文件 5";
      clearInterval(this.timeOut);
      let i = 5;
      this.timeOut = setInterval(() => {
        i--;
        if (i <= 0) {
          //当时间小于等于0秒的时候让空间可用
          this.scrollFinsish = true;
          clearInterval(this.timeOut);
          this.btnTxt = "请仔细阅读以上文件";
        } else {
          //当时间还不够的时候继续锁定
          this.btnTxt = "请仔细阅读以上文件 " + i;
        }
      }, 1000);
    },
    scrollEvent(e) {
      let { offsetHeight, scrollTop, scrollHeight } = e.srcElement;
      if (offsetHeight + scrollTop >= scrollHeight - 50) {
        this.scrollFinsish = true;
        clearInterval(this.timeOut);
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "./style.less";
.readContent {
  height: calc(80vh - 100px);
  padding-bottom: 30px;
  overflow: auto;
}

.footer-button {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 -0.08rem 0.133333rem 0 rgba(0, 0, 0, 0.1);

  .footer-btn {
    width: 90%;
    background-color: #ed9f23;
    color: #fff;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    border-radius: 36px;
    text-align: center;

    &.disabled {
      background-color: #cfcfcf;
    }
  }
}
/deep/ .van-tabs--line .van-tabs__wrap {
  position: fixed;
  top: 20%;
  left: 0;
  width: 100%;
}

/deep/ .van-tabs__content {
  padding-top: 50px;
  padding-bottom: 50px;
}
</style>
